<!--suppress ALL -->
<template>
  <div>
      <nav-title title="入职材料补充" />
      <div class="file-list" v-for="item in megs" >
        <div class="filname">
          <span class="iplodimg" v-if="item.imgUrl == '' || item.imgUrl == null ">
            {{item.attachuserfile}}
            <img class="delicon" @click="delMat(item)" src="./image/delfil.png">
          </span>
          <span class="dingwei" v-else>
            <img style="width:94%;height:200px;" :src="imgurl+item.imgUrl">
            <img class="deliconimg" @click="delMat(item)" src="./image/delfil.png">
          </span>
        </div>
      </div>
      <div class="wrap-load">
        <div class="upload-part">
          <img src="./image/addfils.png">
          <input  @change="uploadFile" type="file" name="file" id="file" accept="image/*" >
        </div>
      </div>
  </div>
</template>

<script>
  import {getHirCai,delHirCai} from "../../api/api";
  import axios from 'axios'
  import { json2Form } from '../../util/http'
  import  { LoadingPlugin } from 'vux';
  import { imgPreview } from '../../util/uploadImg';
  export default {
    name: "infoUploadImage",
    data() {
      return {
        uploadData:{
          cFileNum: '',
          cYesNo:'',
        },
        megs:'',
        imgor: '',
        imgurl: '',
        routerLink: ''
      }
    },
    components: {
      LoadingPlugin
    },
    mounted() {
      if(this.$store.state.hid){
        this.hid = this.$store.state.hid
      }
     this.uploadData.cFileNum = this.$route.params.cFileNum
     this.uploadData.cYesNo = this.$route.params.cYesNo
     this.getMaterial()
     this.imgurl = this.$store.state.picRootURL
     this.routerLink = 'infoupload'
    },
    //computed:mapState(['hid']),
    methods: {
       async uploadFile() {
        const that = this;
        const files = document.querySelector('#file').files;
        if (files.length > 0) {
          imgPreview(files[0]).then((imgRes)=>{
            const formdata = new FormData();
            formdata.append('attachuserfile', files[0].name);
            formdata.append('fileName', imgRes);
            formdata.append('rsHireId', that.hid);
            Object.entries(that.uploadData).forEach(([key,value]) =>{
              formdata.append(key,value)
            })
            //测试使用
            const options = {
              url: '/api/hr/hireFile/upload',
              method: 'post',
              data: formdata,
            }
            this.$vux.loading.show({
            text: '上传中'
            })
            axios(options).then(res=>{
              this.$vux.loading.hide()
              if(res&&res.data.retCode=='000000'){
                that.getMaterial();
                this.$vux.alert.show({
                  title: '提示',
                  content: '上传成功'
                })
              }else{
                this.$vux.alert.show({
                  title: '提示',
                  content: res.data.retMsg
                })
              }
            }).catch(e => {
              console.log("上传出错",e)
            })
          })
          // if(fsize>500){
          //   this.$vux.alert.show({
          //     title: '提示',
          //     content: '上传文件不能大于500k'
          //   })
          //   return
          // }

        }
      },

      getMaterial() {
        //this.imgor=[]
        let params ={
          fileNum: this.$route.params.cFileNum,
          rsHireId: this.hid
        }
        getHirCai(params).then(res => {
          if(res && res.retCode == '000000'){
            this.megs = res.retData
            // this.megs.forEach((val,ind,arr)=>{
            //   let num = val.attachuserfile.indexOf('.')
            //   let ftype = val.attachuserfile.slice(num+1)
            //   if(ftype == 'png' || ftype == 'jpg'){
            //     val.pngjpg= 1
            //   }
            // })
          }
        })
      },
      delMat(item) {
        const that = this;
        this.$vux.confirm.show({
          // 组件除show外的属性
          title: '提示',
          content: '确定删除？',
          onCancel () {
          },
          onConfirm () {
            let params = {
              rsHireId: that.hid,
              fileNum: item.cFileNum,
              cSeqno: item.seqno
            }
            delHirCai(json2Form(params)).then(res=>{
              if(res && res.retCode == '000000'){
                that.getMaterial()
                this.$vux.alert.show({
                  title: '提示',
                  content: '删除成功'
                })
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .file-list{
    text-align: left;
    padding-left:20px;
  }
  .wrap-load{
    padding:20px;
  }
  .upload-part{
    position: relative;
    width: 64px;
    height: 64px;
    margin:20px 0 20px 20px;
  }
  .upload-part img{
    float: left;
    width: 64px;
  }
  .upload-part input{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
  }
  .filname .delicon{
    display:inline-block;
    width: 25px;
    padding-left: 5px;
  }
  .filname span{margin-bottom: 7px;}
  .dingwei{
    position: relative;
  }
  .deliconimg{
    position: absolute;
    top: -92px;
    right: 0px;
  }
  .uploadimg{
    width: 90%;
  }
</style>
